<template>
  <form-wrap :rules="rules" :schema="formSchema" @register="formRegister" />
</template>
<script setup lang="ts">
  import { useForm } from '@/hooks/form';
  import { useValidator } from '@/hooks/validator';
  import { useDictStore } from '@/store';

  const dictStore = useDictStore();
  const { required, limitLetterDigit } = useValidator();

  const formSchema = computed<FormSchema[]>(() => {
    return [
      {
        field: 'code',
        label: '编码',
        type: 'a-auto-complete',
        props: {
          maxlength: 30,
          data: dictStore
            .getItems('DefaultRole')
            ?.map((item) => item.extend.code),
        },
      },
      {
        field: 'name',
        label: '名称',
        type: 'Input',
        props: { maxlength: 50 },
      },
      {
        field: 'remark',
        label: '备注',
        type: 'Input',
        props: {
          type: 'textarea',
          rows: 3,
          maxlength: 200,
        },
      },
    ];
  });

  const rules = reactive({
    code: [required(), limitLetterDigit()],
    name: [required()],
  });

  const { formRegister, formMethods } = useForm();
  const { submitForm } = formMethods;

  const submit = async () => {
    return await submitForm();
  };

  defineExpose({
    submit,
  });
</script>
